import {Sender, Suggestion} from '@ant-design/x';
import type {GetProp} from 'antd';
import {Dispatch, SetStateAction, useEffect, useState} from 'react';

type SuggestionItems = Exclude<GetProp<typeof Suggestion, 'items'>, () => void>;
//AI的建议，输入" / "获取的帮助
const suggestions: SuggestionItems = [
    {label: '怎样看自己有没有阿尔兹海默症的风险？', value: 'q1'},
    {label: '阿尔兹海默症的早期症状有哪些？', value: 'q2'},
];
const ConversationInput = (props: {
    loading: boolean,
    value: string,
    setValue: Dispatch<SetStateAction<string>>,
    onSubmit: (nextContent: any) => void,
    conversationKey: string,
}) => {
    //判断对话的key是否有效来决定是否可以使用输入框
    const [disabled, setDisabled] = useState<boolean>(false);
    const [placeholder, setPlaceholder] = useState<string>("");
    useEffect(() => {
        setDisabled(props.conversationKey == "");
        setPlaceholder(props.conversationKey == "" ? "请选择或创建一个对话以开始" : "输入 / 获取建议")
    }, [props]);
    return (
        <Suggestion
            items={suggestions}
            onSelect={(itemVal) => {
                //当用户选中建议
                const label = suggestions.find(v => v.value === itemVal)!.label!.toString()
                props.setValue(label)
            }}
        >
            {({onTrigger, onKeyDown}) => {
                return (
                    <>
                <Sender
                        disabled={disabled}
                        loading={props.loading}
                        value={props.value}
                        onChange={
                            (nextVal) => {
                                if (nextVal === '/') {
                                    //开始显示提示
                                    onTrigger();
                                } else if (!nextVal) {
                                    //如果他不是 / 就不显示帮助
                                    onTrigger(false);
                                }
                                props.setValue(nextVal);
                            }}
                        onKeyDown={onKeyDown}
                        placeholder={placeholder}
                        onSubmit={props.onSubmit}
                    />
                        </>
                );
            }}
        </Suggestion>
    )
}
export default ConversationInput